<template>
    <div class="row gst-wrap">

        <div class="row gst-goodsType">
            <span v-for="(v,i) of goodsTypes" :key="'goodsTypes'+i" @click="toggleType(v.sortKey)" :class="v.sortKey | isSelected(goodsSort)">{{ v.title }}</span>

        </div>
        <div class="row wrapper gst-contentWrap" ref="wrapper4">
            <div class="row content">
                <div class="gst-content" v-for="(v,i) of goodsList" :key="'goodsList'+i">
                    <SingleGuess :guessInfo="v" :gst="true">
                        <!-- 组件分发 -->
                        <p class="gst-p">
                            <span v-if="v.leftbottom_taglist" :style="{color:v.leftbottom_taglist[0].color,backgroundColor:v.leftbottom_taglist[0].bgColor}">{{v.leftbottom_taglist.content}}</span>
                            <span v-for="(p,k) of v.props" :key="'props'+k">{{p}}</span>
                        </p>
                        <div class="gst-sg-infoWrap">
                            <b>￥{{v.price}}</b>
                            <span class="iconfont">{{v.cfav}}&#xe668;</span>
                        </div>
                    </SingleGuess>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Bscroll from "better-scroll"

export default {
    // beforeRouteUpdate(){
    //     console.log(1);
    // },
    props:{
        searchBy:null
    },
    computed:{
        data(){
            return {
                scroll:null
            }
        },
        goodsTypes(){
            return this.$store.getters.goodsTypes;
        },
        goodsList(){
            return this.$store.getters.goodsList;
        },
        goodsSort(){
            return this.$store.getters.goodsSort
        }
    },
    filters:{
      isSelected(value,goodsSort){
          return value===goodsSort?"selected":""
      }
    },
    mounted(){
        this.bscrollInit();
        console.log(this.$route.params);
        if(this.goodsTypes.length===0&&this.goodsList.length===0){
            // this.$store.dispatch("loadGoodsShowData",this.$route.params.q);
            this.$store.dispatch(this.searchBy.name,this.searchBy.contents);
        }
        // this.$store.commit("setIsShow",!!this.$route.params.isShow);
    },
    methods: {
        bscrollInit() {
            // console.log(this,"2222");
            this.$nextTick(() => {
                if (!this.scroll) {
                    this.scroll = new Bscroll(this.$refs.wrapper4, {
                        click: true
                    });
                } else {
                    this.scroll.refresh();
                }
            });
        },
        toggleType(type){
            this.$store.commit("setGoodsSort",type)
        }
    },
    watch:{
        goodsSort(){
            //切换类型
            // this.$store.dispatch("loadGoodsShowData",this.$route.params.q);
            this.$store.dispatch(this.searchBy.name,this.searchBy.contents);
            
        },
        goodsList(){
            this.scroll.scrollTo(0,0,0,"bounce")
        }
    }
  
}
</script>

<style lang="less">
.gst-wrap{
    position: absolute;
    top:0.8rem;
    left:0;
    bottom:0;
    >.gst-goodsType{
        @border:#eee;
        height:0.65rem;
        display: flex;
        align-items: center;
        border-bottom: 1px solid @border;
        >span{
            display: inline-block;
            font-size: 0.24rem;
            flex-grow: 1;
            border-left:1px solid @border;
            text-align: center;
            &:first-child{
                border:none;
            }
            
            
        }
        >.selected{
            color:#ef4562;
        }
    }
    >.gst-contentWrap{
        position: absolute;
        top:0.65rem;
        left:0;
        bottom:0;
        >.content{
            padding:0.2rem;
            display:flex;
            flex-flow: row wrap;
            justify-content: space-around;
            background-color:#eee;
            >.gst-content{
                width:46%;
                border-radius: 0.15rem 0.15rem 0 0;

            }
        }
    }
    
}
</style>
